<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page contentType="text/html;charset=UTF-8"%>

	<script type="text/javascript">
		// URL to call ajax
		var LIST_GROUP_URL   = "<s:url value='/securityList/groupModuleAjax_SearchGroup'/>";
		var ADD_GROUP_URL    = "<s:url value='/securityList/groupModuleAjax_AddGroup'/>";
		var UPDATE_GROUP_URL = "<s:url value='/securityList/groupModuleAjax_UpdateGroup'/>";
		var REMOVE_GROUP_URL = "<s:url value='/securityList/groupModuleAjax_DeleteGroup'/>";

		var url;
		function newGroup(){
			$('#dlg').dialog('open').dialog('setTitle','New Group');
			$('#fm').form('clear');
			url = ADD_GROUP_URL;
		}
		function editGroup(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlgUpdate').dialog('open').dialog('setTitle','Edit Group');
				$('#fmUpdate').form('load',row);
				url = UPDATE_GROUP_URL;
			} else {
				$.messager.alert('Info', 'Please select the one group');
			}
		}
		function saveGroup(form){
			$('#' + form).form('submit',{
				url: url,
				onSubmit: function(){
					var valid = $(this).form('validate'); 
					if (valid) {
						$.messager.progress(); 
					}
					return valid;
				},
				success: function(result){
					$.messager.progress('close');
					var result = eval('('+result+')');
					if (result.successMessage != ''){
						$('#dlg').dialog('close');		// close the dialog
						$('#dlgUpdate').dialog('close');// close the dialog
						$.messager.alert('Info', result.successMessage);
						reloadGrid();	// reload the user data
					} else {
						$.messager.alert('Error', result.failMessage);
					}
				}
			});
		}
		function removeGroup(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','Are you sure you want to remove this group?',function(r){
					if (r){
						$.messager.progress();
						$.post(REMOVE_GROUP_URL,{groupCode:row.groupCode},function(result){
							$.messager.progress('close');
							if (result.successMessage){
								$.messager.alert('Info', result.successMessage);
								reloadGrid();	// reload the user data
							} else {
								$.messager.alert('Error', result.failMessage);
							}
						},'json');
					}
				});
			} else {
				$.messager.alert('Info', 'Please select one group');
			}
		}
		
		function reloadGrid() {
		    $('#dg').datagrid('reload');
		}

		function doSearchGroup() {  
		    $('#dg').datagrid('load',{ 
		    	'groupInfo.groupName': $('#search_groupName').val(),
		    	'groupInfo.groupCode': $('#search_groupCode').val()
		    });
		}
		
		$(document).ready(function() {
			
			$('#search_button').click(function(){
				doSearchGroup();
			});
		});

	</script>

<center>
	<h2>Security List - Manage Group</h2>
</center>
<center>
	<form id="searchGroupForm" method="post">
		<table width="90%">
			<tr>
				<td align="center" width="30%"><label>Group Name: </label></td>
				<td width="70%"><s:textfield type="text" name="groupInfo.groupName" id="search_groupName" theme="simple" /></td>
			</tr>
			<tr>
				<td align="center" width="30%"><label for=search_groupCode>Group Code: </label>
				</td>
				<td width="70%"><s:textfield type="text" name="groupInfo.groupCode" id="search_groupCode" theme="simple" /></td>
			</tr>
			<tr>
				<td width="30%">&nbsp;</td>
				<td width="70%">
					<a href="#" class="easyui-linkbutton" id="search_button">Search</a>
				</td>
			</tr>
	</table>
	</form>

	<table id="dg" title="Group List" class="easyui-datagrid" style="width:850px;height:250px"
			toolbar="#toolbar" fitColumns="true"
			data-options="
				rownumbers:true,  
                singleSelect:true,  
                autoRowHeight:false,  
                singleSelect: true,
				url: LIST_GROUP_URL,
				loadFilter: function(data) {
					if (data.groupInfoList !== null && data.groupInfoList !== undefined) {
						return {rows: data.groupInfoList, total: data.groupInfoList.length}
					} else {
						return {rows: [], total: 0}
					}					
				},
				method: 'post'
			">
		<thead>
			<tr>
				<th data-options="field:'groupCode',width:100">Group Code</th>
				<th data-options="field:'groupName',width:200">Group Name</th>
				<th data-options="field:'displayCreatedDate',width:200">Created Date</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newGroup()">New Group</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editGroup()">Edit Group</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeGroup()">Remove Group</a>
	</div>
</center>

	<div id="dlg" class="easyui-dialog" style="width:400px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">Group Information</div>
		<form id="fm" method="post" novalidate>
			
			<div class="fitem">
				<label>Group Code:</label>
				<input name="groupCode" class="easyui-validatebox" required="true">
			</div>

			<div class="fitem">
				<label>Group Name:</label>
				<input name="groupName" class="easyui-validatebox" required="true">
			</div>

		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveGroup('fm')">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
	</div>
	
	<div id="dlgUpdate" class="easyui-dialog" style="width:400px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons-update">
		<div class="ftitle">Group Information</div>
		<form id="fmUpdate" method="post" novalidate>
			
			<div class="fitem">
				<label>Group Code:</label>
				<input name="groupCode" class="easyui-validatebox" readonly="readonly" >
			</div>

			<div class="fitem">
				<label>Group Name:</label>
				<input name="groupName" class="easyui-validatebox" required="true">
			</div>

		</form>
	</div>
	<div id="dlg-buttons-update">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveGroup('fmUpdate')">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgUpdate').dialog('close')">Cancel</a>
	</div>
